<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>研究生课程申请|北师香港浸会大学研究生院</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #faf0e6;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: #333;
      line-height: 1.6;
    }

    .container {
      width: 90%;
      max-width: 500px;
      margin: 40px auto;
      padding: 20px;
    }

    h2 {
      color: #0066cc;
      font-size: 18px;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #666;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }

    .form-group .hint {
      font-size: 14px;
      color: #999;
      margin-top: 5px;
    }

    .check-btn {
      background-color: #00b37e;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 10px;
    }

    .check-btn:hover {
      background-color: #009966;
    }

    .disabled-btn {
      background-color: #cccccc !important;
      cursor: not-allowed !important;
    }

    .tooltip {
      position: absolute;
      background-color: #000;
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 14px;
      display: none;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    .loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 24px;
    }

    .success-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      color: #0066cc;
      padding: 15px 25px;
      border-radius: 4px;
      font-size: 16px;
      opacity: 0;
      transition: opacity 1s;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .confirm-dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      display: none;
    }

    .dialog-buttons {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .dialog-buttons button {
      margin-left: 10px;
    }

    #button-container {
      display: flex;
      flex-wrap: wrap;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>请输入信息进行验证 Please enter information for verification:</h2>
    <div class="form-group">
      <div class="tooltip">必填项 Required</div>
      <label>姓 Surname:</label>
      <input type="text" id="surname">
      <div class="hint">需与申请系统填写的姓一致。It needs to be the same surname as the one filled out in the application system.</div>
    </div>
    <div class="form-group">
      <div class="tooltip">必填项 Required</div>
      <label>名 Given Name:</label>
      <input type="text" id="givenName">
      <div class="hint">需与申请系统填写的名一致。It needs to be the same given name as the one filled out in the application system.</div>
    </div>
    <div class="form-group">
      <div class="tooltip">必填项 Required</div>
      <label>证件号后6位 Last 6 digits of ID number:</label>
      <input type="text" id="idNumber">
      <div class="hint">需与申请系统填写的证件号一致。It needs to be the same ID number as the one filled out in the application system.</div>
    </div>
    <h2>查询结果 Results of Check:</h2>
    <p id="result">暂无结果 No results yet</p>
    <div id="button-container">
      <button class="check-btn" id="checkBtn">效验 CHECK</button>
    </div>
  </div>
  <div class="loading" id="loading">查验中...</div>
  <div class="success-popup" id="successPopup">接受录取成功</div>
  <div class="confirm-dialog" id="confirmDialog">
    <p>确认接受录取吗？</p>
    <div class="dialog-buttons">
      <button class="check-btn" id="cancelBtn">取消</button>
      <button class="check-btn" id="confirmBtn">确认</button>
    </div>
  </div>

  <script>
    // 新增状态标记，记录是否已接受录取
    let hasAcceptedAdmission = false;
    
    const checkBtn = document.getElementById('checkBtn');
    const surnameInput = document.getElementById('surname');
    const givenNameInput = document.getElementById('givenName');
    const idNumberInput = document.getElementById('idNumber');
    const result = document.getElementById('result');
    const loading = document.getElementById('loading');
    const successPopup = document.getElementById('successPopup');
    const confirmDialog = document.getElementById('confirmDialog');
    const confirmBtn = document.getElementById('confirmBtn');
    const cancelBtn = document.getElementById('cancelBtn');
    const buttonContainer = document.getElementById('button-container');

    checkBtn.addEventListener('click', function () {
      const tooltips = document.querySelectorAll('.tooltip');
      tooltips.forEach(tooltip => tooltip.style.display = 'none');

      const inputs = [surnameInput, givenNameInput, idNumberInput];
      for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].value.trim() === '') {
          const tooltip = inputs[i].parentNode.querySelector('.tooltip');
          const rect = inputs[i].getBoundingClientRect();
          tooltip.style.left = rect.left + 'px';
          tooltip.style.top = rect.top - tooltip.offsetHeight - 5 + 'px';
          tooltip.style.display = 'block';
          return;
        }
      }

      // 锁定输入框
      lockInputs();

      const surname = surnameInput.value;
      const givenName = givenNameInput.value;
      const idNumber = idNumberInput.value.toUpperCase();

      loading.style.display = 'flex';
      
      if (surname === '白' && givenName === '胤民' && idNumber === '19003X') {
        setTimeout(() => {
          loading.style.display = 'none';
          // 检查是否已接受录取
          if (hasAcceptedAdmission) {
            result.textContent = '已接受录取';
            updateButtons(false); // 传入false使按钮状态与不匹配时一致
          } else {
            result.textContent = '已确认录取资格';
            updateButtons(true);
          }
        }, 4000);
      } else {
        setTimeout(() => {
          loading.style.display = 'none';
          result.textContent = '未校验到学生信息';
          updateButtons(false);
        }, 5000);
      }
    });

    function updateButtons(isValid) {
      buttonContainer.innerHTML = '';
      
      const acceptBtn = document.createElement('button');
      acceptBtn.classList.add('check-btn');
      acceptBtn.textContent = '接受录取';
      
      if (!isValid || hasAcceptedAdmission) {
        acceptBtn.classList.add('disabled-btn');
      } else {
        acceptBtn.addEventListener('click', showConfirmDialog);
      }
      
      buttonContainer.appendChild(acceptBtn);
      
      const returnBtn = document.createElement('button');
      returnBtn.classList.add('check-btn');
      returnBtn.textContent = '返回';
      returnBtn.addEventListener('click', resetForm);
      buttonContainer.appendChild(returnBtn);
    }

    function showConfirmDialog() {
      confirmDialog.style.display = 'block';
    }

    confirmBtn.addEventListener('click', function () {
      confirmDialog.style.display = 'none';
      successPopup.style.opacity = 1;
      
      // 标记为已接受录取
      hasAcceptedAdmission = true;
      
      // 2秒后打开新页面
      setTimeout(() => {
        successPopup.style.opacity = 0;
        // 打开指定链接
        window.open('https://gs.uic.edu.cn', '_blank');
      }, 2000);
    });

    cancelBtn.addEventListener('click', function () {
      confirmDialog.style.display = 'none';
    });

    function resetForm() {
      surnameInput.value = '';
      givenNameInput.value = '';
      idNumberInput.value = '';
      result.textContent = '暂无结果 No results yet';
      
      // 解锁输入框
      unlockInputs();
      
      buttonContainer.innerHTML = '';
      const newCheckBtn = document.createElement('button');
      newCheckBtn.classList.add('check-btn');
      newCheckBtn.id = 'checkBtn';
      newCheckBtn.textContent = '效验 CHECK';
      newCheckBtn.addEventListener('click', function () {
        // 复用检查逻辑
        const tooltips = document.querySelectorAll('.tooltip');
        tooltips.forEach(tooltip => tooltip.style.display = 'none');

        const inputs = [surnameInput, givenNameInput, idNumberInput];
        for (let i = 0; i < inputs.length; i++) {
          if (inputs[i].value.trim() === '') {
            const tooltip = inputs[i].parentNode.querySelector('.tooltip');
            const rect = inputs[i].getBoundingClientRect();
            tooltip.style.left = rect.left + 'px';
            tooltip.style.top = rect.top - tooltip.offsetHeight - 5 + 'px';
            tooltip.style.display = 'block';
            return;
          }
        }

        // 锁定输入框
        lockInputs();

        const surname = surnameInput.value;
        const givenName = givenNameInput.value;
        const idNumber = idNumberInput.value.toUpperCase();

        loading.style.display = 'flex';
        
        if (surname === '白' && givenName === '胤民' && idNumber === '19003X') {
          setTimeout(() => {
            loading.style.display = 'none';
            if (hasAcceptedAdmission) {
              result.textContent = '已接受录取';
              updateButtons(false);
            } else {
              result.textContent = '已确认录取资格';
              updateButtons(true);
            }
          }, 4000);
        } else {
          setTimeout(() => {
            loading.style.display = 'none';
            result.textContent = '未校验到学生信息';
            updateButtons(false);
          }, 5000);
        }
      });
      buttonContainer.appendChild(newCheckBtn);
    }

    // 锁定所有输入框
    function lockInputs() {
      surnameInput.disabled = true;
      givenNameInput.disabled = true;
      idNumberInput.disabled = true;
    }

    // 解锁所有输入框
    function unlockInputs() {
      surnameInput.disabled = false;
      givenNameInput.disabled = false;
      idNumberInput.disabled = false;
    }
  </script>
</body>

</html>
